<template>
  <div class='login'>
    <a-card :style="{ width: screenWidth < 450 ? '80%' : '400px', background: 'rgba(255,255,255,.5)' }" title='超市优惠'>
      <a-input v-model="user_name" placeholder="用户名">
        <a-icon slot="prefix" type="user" />
      </a-input>
      <a-input v-model="email" placeholder="邮箱">
        <a-icon slot="prefix" type="mail" />
      </a-input>
      <a-input v-model="password" placeholder="密码" type='password'>
        <a-icon slot="prefix" type="lock" />
      </a-input>
      <a-input v-model="password2" placeholder="再次输入密码" type='password'>
        <a-icon slot="prefix" type="lock" />
      </a-input>
      <a-button type='primary' @click='handleRegister' style='width: 100%;height: 44px;margin-top: 20px;'>注册</a-button>
    </a-card>
  </div>
</template>

<script>
export default ({
  name: 'Index',
  data () {
    return {
      screenWidth: null,
      user_name: '',
      email: '',
      password: '',
      password2: ''
    }
  },
  mounted () {
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  },
  methods: {
    async handleRegister () {
      const res = await this.$http.post('http://124.221.121.107:2604/api/register', { user_name: this.user_name, email: this.email, password: this.password, _password: this.password2 })
      console.log(res)
      if (res.code === 0) {
        this.$helper.msg.success(res.message)
        setTimeout(() => this.$router.push({ name: 'login' }), 1500)
      } else {
        this.$helper.msg.error(res.message)
      }
    }
  }
})
</script>

<style scoped lang='stylus'>
.login
  width 100%
  height 100%
  background-color #0055a7
  background-image: url('~@/assets/imgs/bg.png');
  // background-size: 85% 34%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex
  justify-content: center
  align-items: center
  /deep/ .ant-card-head-title
    font-weight: bold
    font-size 22px
    color #333
  .ant-input-affix-wrapper
    margin-bottom 30px
  /deep/ .ant-input
    height 50px
</style>
